<template>
  <a-dropdown>
    <div id="header-avatar" style="display: inline-flex;">
      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
        <!-- <a-avatar size="large" style="align-self: center; margin-right: 8px;">
          <template v-slot:icon><UserOutlined /></template>
        </a-avatar> -->
        <span style="color: black; align-self: center; font-size: 16; padding: 10px;">
          当前用户：{{ username }}
        </span>
      </a>
    </div>
    <template v-slot:overlay>
      <a-menu @click="onClick">
        <!-- <a-menu-item key="userInfo">
          <span><UserOutlined /></span>
          <span>个人中心 </span>
        </a-menu-item> -->
        <!-- <a-menu-item key="setting">
          <span><SettingOutlined /></span>
          <span>设置 </span>
        </a-menu-item> -->
        <!-- <a-menu-divider /> -->
        <a-menu-item key="logout">
          <span><PoweroffOutlined /></span>
          <span> 退出登录 </span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
import {
  // UserOutlined,
  // SettingOutlined,
  PoweroffOutlined,
} from '@ant-design/icons-vue'

import Axios from 'axios'

Axios.defaults.baseURL = '/api'

export default {
  name: 'UserDropDownMenu',
  props: ['username'],
  emits: ['logout'],
  components: {
    // UserOutlined,
    // SettingOutlined,
    PoweroffOutlined,
  },
  methods: {
    onClick({ key }) {
      // console.log(`Click on item ${key}`)
      let k = `${key}`
      if (k === 'userInfo') {
        // console.log('userinfo')
      } else if (k === 'setting') {
        // console.log('setting')
      } else if (k === 'logout') {
        // console.log('logout')
        this.logoutUser()
      } else {
        console.log('accept error key')
      }
    },
    logoutUser() {
      Axios.get('/logout/')
        .then(() => {
          // console.log('退出成功！')
          this.$emit('logout')
        })
        .catch((error) => {
          // message.
          // console.log('退出失败！')
          console.log('Error', error.message)
        })
    },
  },
}
</script>

<style>
#header-avatar:hover {
  /* background: rgba(249, 249, 249, 0.2); */
  background: rgba(0, 0, 0, 0.03);
}
</style>
